import Ember from 'ember';

export default Ember.Component.extend({
  quill: null,
  content: "",
  height: 150,
  didInsertElement: function() {
    var quill = this.get('quill');
    if (quill) {
      return;
    }
    // console.log("quill are loading...");
    var quillC = this.$(".quill-c").get(0),
        quillToolbar = this.$(".quill-toolbar").get(0),
        content = this.get('content'),
        self = this,
        quill,
        configs = {
          modules: {
            'toolbar': { container: quillToolbar },
            'link-tooltip': true
          },
          theme: 'snow'
        };

    content = content ? content : "";
    quill = new Quill(quillC, configs);
    this.set('quill', quill);
    quill.focus();
    quill.setHTML(content);
    quill.on('text-change', function(delta, source) {
      self.set('content', quill.getHTML());
      // console.log(quill.getHTML());
      // console.log(delta);
      // console.log(source);
    });

  },
  willClearRender: function() {
    // console.log("quill-field will clear.");
  }
});
